
<template>
    <div class="chart">
        <div class="title">
            <div class="timeSearch">
                <span>
                    {{ options.title }}
                </span>
                <el-radio-group v-model="condition" @change="search">
                    <el-radio-button
                        v-for="(item,index) in options.buttonList"
                        :key="index"
                        :label="item"
                    >
                        {{ item }}
                    </el-radio-button>
                </el-radio-group>
                <div class="dscription">
                    {{ description }}
                </div>
            </div>
            <el-radio-group
                v-if="options.rightTopChangeType"
                v-model="statisticsTab"
                style="margin: 14px 0px"
                @change="changeChartType"
            >
              <el-radio-button
                  v-for="(item,index) in options.statisticsList"
                  :key="index"
                  :label="item.label"
              >
                {{ item.name }}
              </el-radio-button>
<!--                <el-radio-button name="line" label="line" class="_2154BD">-->
<!--                    折线图-->
<!--                </el-radio-button>-->
<!--                <el-radio-button label="bar" name="bar">-->
<!--                    柱状图-->
<!--                </el-radio-button>-->
            </el-radio-group>
        </div>
        <kscharts
            v-show="staticticsData && !showForm"
            :id="id"
            :ref="id"
            :statictics-data="staticticsData"
        />
        <ksform
            v-show="formData && showForm"
            :id="id + 'form'"
            :ref="id + 'form'"
        />
        <div
            v-if="options.changeDirection"
            class="directionBtn"
            @click="showSelect"
        >
            选择维度
        </div>
        <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose"
        >
            <div class="directionCon">
                <el-checkbox
                    :indeterminate="isIndeterminate"
                    v-model="checkAll"
                    @change="handleCheckAllChange"
                    >全选</el-checkbox
                >
                <div style="margin: 15px 0"></div>
                <el-checkbox-group
                    v-model="checkedDirection"
                    @change="handleCheckedDirectionChange"
                >
                    <div>
                        <el-checkbox
                            v-for="(item,index) in directions"
                            :label="item"
                            :key="index"
                            >{{ item.name }}</el-checkbox
                        >
                    </div>
                </el-checkbox-group>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="confirmChecked"
                    >确 定</el-button
                >
            </span>
        </el-dialog>
        <!-- <div class="directionCon">
            <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
            <div style="margin: 15px 0;"></div>
            <el-checkbox-group v-model="checkedDirection" @change="handleCheckedDirectionChange">
                <div>
                    <el-checkbox v-for="item in directions" :label="item" :key="item">{{item}}</el-checkbox>
                </div>
            </el-checkbox-group>
        </div> -->
    </div>
</template>
<script>
export default {
    name: 'chart',
    props: {
        id: {
            type: String,
            default: '',
        },
        vuexModelName: {
            type: String,
            default: '',
        },
        dataReportInfoYear: {
            type: Object,
            default: () => {},
        },
        staticticsData: {
            type: Object,
            default: () => {},
        },
        staticticsDataFirst: {
          type: Object,
          default: () => {},
        },
        options: {
            type: Object,
            default: () => {},
        },
        description: {
          type: String,
          default: '',
        }
    },
    components: {},
    data() {
        return {
            statisticsTab: 'line',
            condition: '金额',
            checkAll: false,
            checkedDirection: [],
            checkedDirectionFirst: [],
            directions: [],
            directionsFirst: [],
            formData:{},
            isIndeterminate: false,
            dialogVisible: false,
            showForm: false
        }
    },
    computed: {},
    created() {},
    mounted() {},
    methods: {
       //点击展示维度筛选弹窗
        showSelect(){
          this.dialogVisible = true
          this.getCheckedDirection()
          let checkedCount = this.checkedDirection.length
          this.checkAll = checkedCount === this.directions.length
          this.isIndeterminate = this.checkAll
          console.log(this.checkedDirection)
        },
        //初始化已选维度全部数据
        getCheckedDirectionFirst(){
          this.checkedDirectionFirst = []
          this.getDirections()
          console.log(this.directionsFirst)
          console.log(this.staticticsData.yAxis)
          for(let i=0; i<this.staticticsData.yAxis.length; i++){
            let itemFirst = this.directionsFirst.filter((element)=>{
              return element.name === this.staticticsData.yAxis[i].name;
            })
            console.log(itemFirst)
            this.checkedDirectionFirst.push(itemFirst[0])
          }
          console.log(this.checkedDirectionFirst)
        },
      //初始化已选维度数据
      getCheckedDirection(){
        this.checkedDirection = []
        this.getDirections()
        console.log(this.directions)
        console.log(this.staticticsData.yAxis)
        for(let i=0; i<this.staticticsData.yAxis.length; i++){
          let item = this.directions.filter((element)=>{
            return element.name === this.staticticsData.yAxis[i].name;
          })
          console.log(item)
          this.checkedDirection.push(item[0])
        }
        console.log(this.checkedDirection)
      },
       //点击全选
        handleCheckAllChange(val) {
          console.log(val)
            this.checkedDirection = val ? this.directions : []
            this.isIndeterminate = false
        },
        handleClose() {
            this.$confirm('确认关闭？').then(() => {
                this.dialogVisible = false
                this.checkedDirection = []
                this.isIndeterminate = false
                this.checkAll = false
            })
        },
        handleCheckedDirectionChange(value) {
            console.log(value)
            let checkedCount = value.length
            this.checkAll = checkedCount === this.directions.length
            // this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
            this.isIndeterminate = this.checkAll
          console.log(this.checkAll)
        },
        // 确认选择
        confirmChecked(){
          console.log(this.checkedDirection)
          this.staticticsData.yAxis = this.checkedDirection
          console.log(this.staticticsData)
          this.dialogVisible = false
          // this.checkedDirection = []
          // this.isIndeterminate = false
          // this.checkAll = false
          this.changeAllData()
        },

        changeChartType(type) {
          console.log(type)
          console.log(this.staticticsData)
          if(type === 'form'){
            this.showForm = true
            this.changeAllFormData()
          }else{
            this.showForm = false
            this.staticticsData.type = type
            for(let i=0; i<this.staticticsData.yAxis.length; i++){
              this.staticticsData.yAxis[i].type = type
            }
            // this.$refs[this.id].changeType(this.id, type)
            this.changeAllData()
          }
        },
        // 选择筛选类型
        search(condition) {
          console.log(condition)
          this.getCheckedDirectionFirst()
          console.log(this.checkedDirectionFirst)
          if(condition === '用户数'){
            this.staticticsData.yAxis = this.checkedDirectionFirst.map((item) =>{
              return{
                name: item.name,
                type: item.type,
                data: item['人数']
              }
            })
          }else if(condition === '订单量'){
            this.staticticsData.yAxis = this.checkedDirectionFirst.map((item) =>{
              return{
                name: item.name,
                type: item.type,
                data: item['次数']
              }
            })
          }else if(condition === '金额'){
            this.staticticsData.yAxis = this.checkedDirectionFirst.map((item) =>{
              return{
                name: item.name,
                type: item.type,
                data: item['金额']
              }
            })
          }else if(condition === '用户付费转化率'){
            this.staticticsData.yAxis = this.checkedDirectionFirst.map((item) =>{
              return{
                name: item.name,
                type: item.type,
                data: item['比率']
              }
            })
          }else if(condition === '用户退费率'){
            this.staticticsData.yAxis = this.checkedDirectionFirst.map((item) =>{
              return{
                name: item.name,
                type: item.type,
                data: item['比率']
              }
            })
          }
          console.log(this.staticticsData)
          this.changeAllData()
          this.changeAllFormData()
          this.$emit('condition', condition)
            // this.$store.commit(this.vuexModelName + '/updatePostParams', {
            //     condition: condition,
            // })
            //
        },
      // 初始化筛选维度
      getDirections() {
        console.log(this.condition)
        console.log(this.staticticsDataFirst)
        if(this.condition === '用户数'){
          this.directions = this.staticticsDataFirst.yAxis.map((item) =>{
            return{
              name: item.name,
              type: item.type,
              data: item['人数']
            }
          })
          this.directionsFirst = this.staticticsDataFirst.yAxis.map((item) =>{
            return{
              name: item.name,
              type: item.type,
              '人数': item['人数'],
              '次数': item['次数'],
              '金额': item['金额'],
              '比率': item['比率']
            }
          })
        }else if(this.condition === '订单量'){
          this.directions = this.staticticsDataFirst.yAxis.map((item) =>{
            return{
              name: item.name,
              type: item.type,
              data: item['次数']
            }
          })
          this.directionsFirst = this.staticticsDataFirst.yAxis.map((item) =>{
            return{
              name: item.name,
              type: item.type,
              '人数': item['人数'],
              '次数': item['次数'],
              '金额': item['金额'],
              '比率': item['比率']
            }
          })
        }else if(this.condition === '金额'){
          this.directions = this.staticticsDataFirst.yAxis.map((item) =>{
            return{
              name: item.name,
              type: item.type,
              data: item['金额']
            }
          })
          this.directionsFirst = this.staticticsDataFirst.yAxis.map((item) =>{
            return{
              name: item.name,
              type: item.type,
              '人数': item['人数'],
              '次数': item['次数'],
              '金额': item['金额'],
              '比率': item['比率']
            }
          })
        }else if(this.condition === '用户付费转化率'){
          this.directions = this.staticticsDataFirst.yAxis.map((item) =>{
            return{
              name: item.name,
              type: item.type,
              data: item['比率']
            }
          })
          this.directionsFirst = this.staticticsDataFirst.yAxis.map((item) =>{
            return{
              name: item.name,
              type: item.type,
              '人数': item['人数'],
              '次数': item['次数'],
              '金额': item['金额'],
              '比率': item['比率']
            }
          })
        }else if(this.condition === '用户退费率'){
          this.directions = this.staticticsDataFirst.yAxis.map((item) =>{
            return{
              name: item.name,
              type: item.type,
              data: item['比率']
            }
          })
          this.directionsFirst = this.staticticsDataFirst.yAxis.map((item) =>{
            return{
              name: item.name,
              type: item.type,
              '人数': item['人数'],
              '次数': item['次数'],
              '金额': item['金额'],
              '比率': item['比率']
            }
          })
        }
      },
      // 全量数据更新
      changeAllData() {
        //this.getDirections()
        console.log(this.staticticsData)
        this.$refs[this.id].search(this.staticticsData)
      },
      changeAllFormData(){
        console.log(this.staticticsData)
        console.log(this.staticticsData.yAxis)
        let formData = this.staticticsData.xAxis[0].data.map((item) =>{
          return{
            date: item
          }
        })
        for(let i=0; i<this.staticticsData.yAxis.length; i++){
          if(this.staticticsData.yAxis[i].name === '整体'){
            for(let j=0;j<formData.length; j++){
              formData[j].all = this.staticticsData.yAxis[i].data[j]
            }
          }
          if(this.staticticsData.yAxis[i].name === '故事会员'){
            for(let j=0;j<formData.length; j++){
              formData[j].storyMember = this.staticticsData.yAxis[i].data[j]
            }
          }
          if(this.staticticsData.yAxis[i].name === '听书会员'){
            for(let j=0;j<formData.length; j++){
              formData[j].listenMember = this.staticticsData.yAxis[i].data[j]
            }
          }
          if(this.staticticsData.yAxis[i].name === '故事'){
            for(let j=0;j<formData.length; j++){
              formData[j].story = this.staticticsData.yAxis[i].data[j]
            }
          }
          if(this.staticticsData.yAxis[i].name === '知识付费'){
            for(let j=0;j<formData.length; j++){
              formData[j].knowledge = this.staticticsData.yAxis[i].data[j]
            }
          }
        }
        console.log('2222222222',formData)
        this.formData = formData
        this.$refs[this.id + 'form'].search(this.formData)
      }
    },
}
</script>
<style lang="scss" scoped>
.chart {
    background: #fff;
    margin: 0 10px;
    margin-bottom: 20px!important;
    border-radius: 4px;
    box-shadow: 0px 2px 11px 0px rgba(228, 233, 238, 1);
    padding-bottom: 10px;
    box-sizing: border-box;
    .title {
        padding: 0 10px;
        line-height: 60px;
        border-bottom: 1px solid #e4e7ee;
        .timeSearch {
            .title {
                height: 20px;
                font-size: 14px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #181818;
                line-height: 20px;
                margin-right: 12px;
            }
            .dscription {
                font-size: 14px;
                color: #999;
                line-height: 34px;
                height: 34px;
            }
        }
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}
.directionBtn {
    cursor: pointer;
    text-align: right;
    padding-right: 20px;
    color: #666;
}
</style>
